<template>
    <div style="margin: 10px;">
        <div v-show="showModel">
            <div><el-button @click="goback">返回</el-button></div>
            <!--模板列表-->
            <el-card class="box-card" v-for="(v,index) in paperList" :key="index" style="margin: 0.5rem 0;">
                <div @click="tapModel(v)" style="display: flex;justify-content: space-between;align-items: center">
                    <div class="text item">
                        {{v.name}}
                    </div>
                    <div><i class="el-icon-arrow-right"></i></div>
                </div>
            </el-card>
        </div>
        <div v-show="!showModel">
            <div>
                <el-button @click="showModel=true">返回列表</el-button>
                <a download="true" class="el-button el-button--primary el-button--small" :href="exportUrl">下载</a>
            </div>
            <div class="listScroll">
                <el-card class="box-card" v-for="(v, index) in elist" :key="index">
                    <div>题目：{{v.content}}</div>
                    <div style="color: #409EFF">正确答案：{{v.right_answer}}</div>
                    <div
                        :class="{'def':(!v.answer_time||v.is_right=='0'), 'warn':(v.answer_time&&v.is_right=='1')}">
                        <i :class="{'el-icon-error':(!v.answer_time||v.is_right=='0'), 'el-icon-warning':(v.answer_time&&v.is_right=='1')}"></i>
                        考生答案：{{v.answer_time?v.user_answer:'未答'}}

                        <!--0否，1部分正确，2全部正确-->
                    </div>
                    <div style="font-size: .8rem;color: #888;">答题时间：{{v.answer_time}}</div>
                </el-card>
            </div>

            <div class="bottom-btn">
                <el-button-group style="width: 100%;display: flex;">
                    <el-button type="default" icon="el-icon-arrow-left" @click="pre">上一页</el-button>
                    <el-button type="primary" @click="next">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>
            </div>
        </div>
    </div>
</template>

<script>
    import URL from '../../utils/baseUrl'
    export default {
        name: "exam-error",
        data(){
          return{
              showModel: true,
              paperList: [],

              modelId: '',

              elist: [],
              page: {},
              pageSize: 0,
              totalRow: 0,
              currentPage: 1,

              exportUrl: '',
          }
        },
        methods:{
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 获取试卷列表
            getPaperList(){
                this.loadopen();
                this.config.appPost('/user/testpaper/findModeList', {}).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.paperList = res.data.examinationModeList;
                        console.log(this.paperList)
                    }else {
                        this.$message.error(res.data.message);
                    }
                    this.$emit('done', '');
                });
            },
            tapModel(v){
                this.modelId = v.id;
                this.getError(1);
            },
            // 获取错题信息
            getError(pageNumber){
                this.loadopen();
                this.config.appPost('/user/testpaper/findErrorBen', {modeId: this.modelId, pageNum: pageNumber?pageNumber:1}).then(res => {
                    this.loadclose();
                    this.showModel = false;
                    if (res.data.code === '0') {
                        this.page = res.data.page;
                        this.elist = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.currentPage = res.data.page.pageNumber;

                        this.exportUrl = URL + '/user/testpaper/exportfindErrorBen?modeId='+this.modelId;
                    }else {
                        this.$message.error(res.data.message);
                    }
                    this.$emit('done', '');
                });
            },
            // 上一题
            pre(){
                if(this.currentPage>1) {
                    this.getError(this.currentPage-1);
                }
            },
            // 下一题
            next(){
                if(this.currentPage<(this.page.totalPage)) {
                    this.getError(this.currentPage+1);
                }
            },
            goback(){this.$router.back();}
        },
        mounted(){
            this.getPaperList();
        }
    }
</script>

<style scoped lang="less">
    .listScroll{
        position: absolute;
        width: 100%;
        left: 0;
        top: 3rem;
        bottom: 3rem;
        overflow-y: scroll;
    }
    .box-card{
        margin: 0.5rem 0;
    }
    .box-card{
        .def{color: #F56C6C}
        .warn{color: #E6A23C}
    }
    .bottom-btn{
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        .el-button{
            width: 50%;
            height: 2.5rem;
        }
    }
</style>
